<script setup lang="ts">
import type { RenderFunction } from 'vue'

defineProps<{
  label: string | RenderFunction
  loading: boolean
  checked: boolean
}>()
const emit = defineEmits<{
  (event: 'update:checked', checked: boolean): void
}>()

const handleToggleCheck = (checked: boolean) => {
  emit('update:checked', checked)
}
</script>

<template>
  <div class="layers__item">
    <slot name="window"></slot>
    <div
      :class="[
        'layers__item__icon',
        checked && 'layers__item__icon--checked',
        loading && 'layers__item__icon--loading'
      ]"
      @click="handleToggleCheck(!checked)"
    >
      <slot name="icon"></slot>
    </div>
    <span class="layers__item__label">
      <component
        v-if="typeof label === 'function'"
        :is="label"
      />
      <template v-else>
        {{ label }}
      </template>
    </span>
  </div>
</template>
